<script setup>
import { userAllService } from '@/api/user.js'
import { ref } from 'vue'

defineProps({
  modelValue: {
    type: [Number, String]
  }
})
const emit = defineEmits(['update:modelValue'])
const channelList = ref([])
// const getChannelList = async () => {
//   try {
//     const res = await userAllService()
//     channelList.value = [
//       ...new Set(
//         res.data.data
//           .filter((student) => student.studentGrade) // 过滤掉缺少 studentGrade 属性的对象
//           .map((student) => student.studentGrade)
//       )
//     ]
//   } catch (error) {
//     // 在这里进行适当的异常处理
//     console.error('Error fetching channel list:', error)
//     // 可以在页面上显示错误信息，或者采取其他适当的处理措施
//   }
// }

const getChannelList = async () => {
  const res = await userAllService()
  channelList.value = [
    ...new Set(
      res.data.data
        .filter((student) => student.studentGrade) // 过滤掉缺少 studentGrade 属性的对象
        .map((student) => student.studentGrade)
    )
  ]
}
getChannelList()
</script>

<template>
  <!-- label 展示给用户看的，value 收集起来提交给后台的 -->
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    style="width: 200px"
  >
    <el-option
      v-for="(channel, index) in channelList"
      :key="index + 1"
      :label="channel"
      :value="channel"
    ></el-option>
  </el-select>
</template>
